<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .header {
            height: 500px;
            background: url('images/bg.jpg') repeat-x;
        }

        .con {
            width: 968px;
            height: 377px;
            margin: 47px auto 31px;
        }

        .footer {
            width: 968px;
            height: 50px;
            margin: 0px auto;
        }

        .nav,.banner {
            width: 968px;
            margin: 0px auto
        }
        .nav h1 {
            float: left;
        }

        .nav ul {
            float: right;
        }

        .nav li {
            float: left;
        }

        .nav img {
            width: 123px;
            margin-top: 14px;
        }

        .nav a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
        }

        .nav li {
            padding: 12px 10px;
            margin-right: 4px;
            margin-top: 21px;
        }

        .nav li:hover {
            background:blanchedalmond
        }

        .banner .left {
            float: left;
        }

        .banner .right {
            float: right;
        }

        .nav {
            height: 74px;
        }

        .banner .left h2 {
            font-size: 24px;
            margin: 55px 0px 13px 0px;
        }

        .banner .list li {
            line-height: 28px;
            font-size: 14px;
        }

        .banner .left img {
            margin-top: 15px;
            margin-bottom: 14px;
        }

        .banner .cc li {
            line-height: 24px;

        }

        .banner .cc a {
            font-size: 12px;
            text-decoration: none;
        }

        .banner .cc a:hover {
            text-decoration: underline;
            color: pink;
        }

        .con .left {
            width: 628px;
            float: left;
        }

        .con .left img {
            width: 628px;
        }

        .con .left li {
            float: left;
            width: 216px;
        }

        .con .left .last {
            width: 194px;
        }

        .con .right {
            width: 322px;
            float: right;
        }

        .con .right h3 {
            font-size: 15px;
        }

        .con .right li {
            line-height: 30px;
            font-size: 14px;
        }

        .con .right i {
            color: red;
        }

        .con .right span {
            float: right;
        }

        .footer .left {
            float: left;
        }

        .footer .right {
            float: right;
        }

        .footer .bottom {
            float: left;
            width: 968px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav">
            <h1>
                <a href="">
                    <img src="images/logo.png" alt="">
                </a>
            </h1>
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">帮助与反馈</a>
                </li>
                <li>
                    <a href="">公众平台</a>
                </li>
                <li>
                    <a href="">开放平台</a>
                </li>
                <li>
                    <a href="">微信支付</a>
                </li>
                <li>
                    <a href="">微信广告</a>
                </li>
                <li>
                    <a href="">企业微信</a>
                </li>
                <li>
                    <a href="">表情开放平台</a>
                </li>
                <li>
                    <a href="">微信网页版</a>
                </li>
            </ul>
        </div>
        <div class="banner">
            <div class="left">
                <h2>微信，是一个生活方式</h2>
                <ul class="list">
                    <li>
                        超过十亿人使用的手机应用
                    </li>
                    <li>
                        超过十亿人使用的手机应用
                    </li>
                    <li>
                        超过十亿人使用的手机应用
                    </li>
                </ul>
                <img src="images/l.png" alt="">
                <ul class="cc">
                    <li><a href="">忘记了微信帐号或密码？</a></li>
                    <li><a href="">忘记了微信帐号或密码？</a></li>
                    <li><a href="">忘记了微信帐号或密码？</a></li>
                </ul>
            </div>
            <img src="images/pic.gif" alt="" class="right">
        </div>
    </div>
    <div class="con">
        <div class="left">
            <img src="images/b.png" alt="">
            <ul>
                <li>
                    <h3>微信网页版</h3>
                    <p>扫一扫二维码</p>
                    <p>就能在浏览器上使用微信</p>
                    <a href="">了解更多</a>
                </li>
                <li>
                    <h3>微信网页版</h3>
                    <p>就能在浏览器上使用微信</p>
                    <a href="">了解更多</a>
                </li>
                <li class="last">
                    <h3>微信网页版</h3>
                    <p>扫一扫二维码</p>
                    <p>就能在浏览器上使用微信</p>
                    <a href="">了解更多</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h3>最新消息</h3>
            <ul>
                <li>微信 8.0.7 for iOS 正式版发布<i>(New)</i> <span>06-06</span></li>
                <li>微信 8.0.6 for Android 正式版发布 <i>(New)</i> <span>05-27</span></li>
                <li>微信 3.0.0 for Mac 正式版发布 <i>(New)</i> <span>03-29</span></li>
                <li>微信 3.2.1 for Windows 正式版发布  <i>(New)</i> <span>03-22</span></li>
                <li>关于部分 iOS 9 用户无法更新微信 <i>(New)</i> <span>01-28</span></li>
                <li>微信外部链接内容管理规范 <i></i> <span>02-11</span></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <p class="left">关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引 </p>
        <p class="right"> 简体中文 | 繁體中文 | English</p>
        <p class="bottom"> © 1998 - 2021 Tencent Inc. All Rights Reserved</p>
    </div>
</body>

</html>